<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共{{ pageSetting.total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="export2excel">导出</el-button>
          <el-button size="small" type="primary" :disabled="!checkPerm('addEmlyee')" @click="showDialog = true">新增员工</el-button>
        </template>
      </page-tools>

      <!-- 放置表格和分页 -->
      <!-- :formatter="formatEmployment" 格式化聘用形式 -->
      <el-card>
        <el-table v-loading="loading" border :data="list">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="头像" sortable="" align="center" width="200">
            <template slot-scope="scope">
              <img
                slot="reference"
                v-imgerror="require('@/assets/common/bigUserHeader.png')"
                :src="scope.row.staffPhoto "
                style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
                alt=""
                class="avatar"
                @click="showCode(scope.row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmployment" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="">
            <template slot-scope="scope">
              {{ scope.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template slot-scope="scope">
              <el-switch :value="scope.row.enableState ===1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRole(scope.row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next"
            :current-page="pageSetting.page"
            :page-size="pageSetting.size"
            :total="pageSetting.total"
            @current-change="changepage"
          />
        </el-row>
      </el-card>

      <!-- 弹出新增员工组件 -->
      <addEmployee :show-dialog.sync="showDialog" />
      <!-- 弹出二维码 -->
      <el-dialog title="头像二维码" :visible="isShowCode" @close="isShowCode = false">
        <div class="canvasWrapper">
          <canvas ref="myCanvas" />
          <img :src="avatarUrl" alt="" class="codeCover">
        </div>
      </el-dialog>
      <!-- 弹出角色 -->
      <AssignRole ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
    </div>
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
// 引入枚举数据
import employeesEnum from '@/api/constant/employees'
import { formatDate } from '@/filters'
import addEmployee from './comments/add-employee'
import QRcode from 'qrcode'
import AssignRole from './comments/assign-role'
export default {
// 注册
  components: {
    addEmployee, AssignRole
  },
  data() {
    return {
      loading: false,
      list: [],
      pageSetting: {
        page: 1,
        size: 20,
        total: 0
      },
      // 弹出新增员工组件
      showDialog: false,
      // 弹出二维码
      isShowCode: false,
      // 二维码中间的图片
      avatarUrl: '',
      // 显示角色
      showRoleDialog: false,
      userId: ''

    }
  },

  // computed: {
  //   checkPerm(name) {
  //     console.log(name)
  //     // 检查这个按钮name 是否存在于权限points数组中
  //     const points = this.$store.state.user.userInfo.roles.points

  //     const res = points.filter(item => {
  //       return name.includes(item)
  //     })
  //     if (res.includes(name)) {
  //       return true
  //     }
  //     return false
  //   }
  // },
  created() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      this.loading = true
      const { total, rows } = await getEmployeeList(this.pageSetting)
      console.log('总数', total)
      this.pageSetting.total = total
      this.list = rows
      this.loading = false
      // this.$store.commit('user/getUserInfo')
    },
    changepage(newpage) {
      this.pageSetting.page = newpage
      this.getEmployeeList()
    },
    formatEmployment(row, column, cellvalue, index) {
      // 这里可以接受到当前格子的数据
      // 一共四个参数
      // 在这里可灵活的进行格式化,
      // 最终 return 的值会显示在页面上
      // 从枚举数据中找到 id 跟我的格子数据一样的对象, 输出他的 value 即可
      const obj = employeesEnum.hireType.find(item => item.id === cellvalue)
      // console.log('0000', obj)
      return obj ? obj.value : '未知形式'
    },
    async export2excel() {
      // 1.加载所有员工数据
      const { rows } = await getEmployeeList(
        {
          page: 1,
          size: this.pageSetting.total
        })
      console.log(rows)
      // 2.设置 字典
      const dict = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      // 3.引入库
      const excel = await import('@/vendor/Export2Excel')
      // console.log(excel)
      // excel.export_json_to_excel({
      //   header: ['姓名', '年龄', '性别'],
      //   data: [
      //     ['tom', '123', '男'],
      //     ['rose', '123', '女']
      //   ]

      // })
      // 4.设置好excel需要的header,data
      // 4.1Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，
      // 数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
      const header = Object.keys(dict)
      // console.log(header)  //入职日期 手机号 姓名...
      const data = rows.map(user => {
        return this.obj2Array(user, dict)
      })
      // 5保存excel文件
      excel.export_json_to_excel({
        header, data
      })
    },
    obj2Array(user, dict) {
      const newUser = []
      // .遍历表头
      for (const key in dict) {
        // 2.拿到表头对应的英文 key
        const enkey = dict[key]
        // 3.得到user的数据当中
        // 需要根据key 做特殊处理
        let value
        if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
          // 处理时间
          value = formatDate(user[enkey])
        } else if (enkey === 'formOfEmployment') {
          // 处理聘用形式
          const obj = employeesEnum.hireType.find(item => item.id === user[enkey])
          value = obj ? obj.value : '未知形式'
        } else {
          value = user[enkey]
        }

        // 4.放去到新数组
        // 4.1 push()方法可以向数组的末尾添加一个或多个元素,并返回新的长度
        newUser.push(value)
      }
      return newUser
    },
    // 删除员工
    async delEmployee(id) {
      // 二次检验
      await this.$confirm('确定删除?')
      // 调用函数
      await delEmployee(id)
      // 提示成功
      this.$message('删除成功')
      // 刷新页面
      this.getEmployeeList()
    },
    // 弹出头像二维码
    showCode(url) {
      if (url) {
        // 有url参数 才显示弹窗
        this.isShowCode = true
        // 二维码中间的图片
        this.avatarUrl = url
        // 在这里应该生成一个二维码
        // 利用当前头像的 url
        // 要等到渲染完, 弹窗出现后再生成二维码
        // 1. 延时器 猜一个 100 毫秒
        // setTimeout(() => {
        //   QRCode.toCanvas(this.$refs.myCanvas, url)
        // }, 100)
        // 2. vue 提供的下次渲染完毕再执行回调的函数
        this.$nextTick(() => {
          // 第一个参数是 画布在哪显示qr二维码的范围    类型:DOMElement
          // 第二个参数是 要编码的文本或描述段的对象列表 类型:String 或 Array
          QRcode.toCanvas(this.$refs.myCanvas, url, {
            width: 300,
            color: {
              dark: '#66b1ff'
            }
          })
        })
      }
    },
    // 显示角色
    async assignRole(id) {
      await this.$refs.assignRole.getUserDetailById(id)
      this.showRoleDialog = true
      this.userId = id
    }
    // checkPerm(name) {
    //   // 检查这个按钮 name 是否存在于权限 points 数组中
    //   const points = this.$store.state.user.userInfo.roles.points
    //   return points.includes(name)
    // }
    // getEmployee() {
    //   this.getEmployeeList()
    //   this.showDialog = false
    // }

  }
}
</script>

<style lang="scss" scoped>
.avatar{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.canvasWrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}
.codeCover{
  position: absolute;
border-radius: 50%;
  width: 50px;
  height: 50px;
  object-fit: cover;
}
</style>
